<template>
	<view class="Shop">
		<view
			class="ShopView"
			:style="{
				background: list.BgColor,
				'padding-left': list.Left + 'px',
				'padding-top': list.Upper + 'px',
				'padding-bottom': list.Lower + 'px',
				'padding-right': list.Right + 'px'
			}"
		>
			<view class="ShopItem" :style="{ 'border-radius': list.Style == 'One' ? 0 + 'rpx' : 16 + 'rpx' }">
				<view class="ShopTop">
					<view>
						<view class="ShopTitle">{{ storeInfo.store_name }}</view>
						<view class="ShopTopLeft">
							<view class="ShopTopLeftNum">
								<image src="https://manager.ryz1620.com/static/adminShop/iconHeart.png"></image>
								<text>{{ storeInfo.fans_num }} 人关注</text>
							</view>
							<view style="flex: 1;">营业时间：{{ storeInfo.business_start }}-{{ storeInfo.business_end }}</view>
						</view>
						<view class="ShopBottom" @click="SetStoreFollow(storeInfo.user_follow_status)">
							<u-icon
								:name="storeInfo.user_follow_status == 0 ? 'heart' : 'heart-fill'"
								:color="storeInfo.user_follow_status == 0 ? '#333' : 'red'"
								size="32"
								style="margin-right: 8rpx;"
							></u-icon>
							<text>{{ storeInfo.user_follow_status == 0 ? '关注' : '已关注' }}</text>
						</view>
					</view>
					<view class="ShopLoGo">
						<image v-if="storeInfo.store_logo.path" :src="storeInfo.store_logo.path"></image>
						<text v-else>LOGO</text>
					</view>
				</view>
				<view class="ShopMessage">
					<view class="ShopText" style="position: relative;" :animation="box">
						<view class="anr">
							<text>{{ storeInfo.store_detail }}</text>
							<!-- <u-icon name="arrow-up" v-if="text.length >= 30" color="#9a9a9a" size="20" style="margin-left: 10rpx;float: right;" @click="TextHeightBack"></u-icon> -->
							<view class="ShopBtnAdd" v-if="TextHeightBool == false" @click="TextHeightClick">
								<text style="margin-right: 4rpx;" v-if="storeInfo.store_detail.length > 30">...</text>
								<u-icon name="arrow-down" color="#9a9a9a" size="20"></u-icon>
							</view>
							<view class="ShopBtnAdd" v-if="TextHeightBool == true" @click="TextHeightBack">
								<text></text>
								<u-icon name="arrow-up" color="#9a9a9a" size="20"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import $HTTPS from '@/service/DIY.js';
export default {
	name: '',
	components: {},
	data() {
		return {
			box: {},
			TextHeightBool: false,
			storeInfo: null,
			list: null,
			storeId: null,
		};
	},
	props: {
		config: {
			type: Object //校验类型
			// default: ''
		}
	},
	mounted() {
		// console.log(this.storeId);
		var that = this;
		this.list = this.config;
		this.storeId = this.config.shop.id;
		this.storeInfo = this.config.shop;
		// console.log(this.config);
		// that.getDetail();
	},
	methods: {
		// 获取商家信息
		getDetail() {
			var that = this;
			let storeId = this.storeId;
			$HTTPS
				.GetStoreMessage({
					store_id: storeId
				})
				.then(res => {
					if (res.code == 1) {
						let data = res.data;
						// console.log(data);
						that.storeInfo = data;
						// this.getTrend();
					} else {
						that.$utils.showErr({
							title: res.msg
						});
					}
				})
				.catch(err => {
					that.$utils.showErr({
						title: err
					});
				});
		},
		SetStoreFollow(row) {
			var that = this;
			// console.log(row);
			let type = null;
			// let FollowNum = row == 0 ? 1 : 0;
			if (row == 0) {
				type = 1;
				$HTTPS
					.GetstoreFollow({
						store_id: that.storeId,
						type: 1
					})
					.then(res => {
						if (res.code == 1) {
							// console.log(data);
							this.storeInfo.user_follow_status = 1;
							this.storeInfo.fans_num += 1;
						} else {
							that.$utils.showErr({
								title: res.msg
							});
						}
					})
					.catch(err => {
						that.$utils.showErr({
							title: err
						});
					});
			} else if (row == 1) {
				type = 2;
				uni.showModal({
					title: '提示',
					content: '确认取消关注?',
					success: res => {
						if (res.confirm) {
							$HTTPS
								.GetstoreFollow({
									store_id: that.storeId,
									type: 2
								})
								.then(res => {
									if (res.code == 1) {
										// console.log(data);
										this.storeInfo.user_follow_status = 0;
										this.storeInfo.fans_num += type == 1 ? 1 : -1;
									} else {
										that.$utils.showErr({
											title: res.msg
										});
									}
								})
								.catch(err => {
									that.$utils.showErr({
										title: err
									});
								});
						} else if (res.cancel) {
							return;
						}
					}
				});
			}
		},
		//查看更多
		TextHeightClick() {
			var that = this;
			var HeightBool = that.TextHeightBool;
			let option = {
				duration: 300, // 动画执行时间
				timingFunction: 'ease-in' // 动画执行效果
			};
			var anr = uni.createAnimation(option); // 创建动画
			var obj = uni.createSelectorQuery().in(this);
			obj.select('.anr')
				.boundingClientRect(function(rect) {
					//获取子元素高度
					var box = uni.createAnimation(option); // 创建动画
					that.box = box;
					box.height(rect.height).step(); //改变父元素高度
					that.box = box.export();
					that.TextHeightBool = true;
				})
				.exec();
		},
		//隐藏更多
		TextHeightBack() {
			var that = this;
			let option = {
				duration: 300, // 动画执行时间
				timingFunction: 'ease-in' // 动画执行效果
			};
			var anr = uni.createAnimation(option); // 创建动画
			var obj = uni.createSelectorQuery().in(this);
			obj.select('.anr')
				.boundingClientRect(function(rect) {
					//获取子元素高度
					var box = uni.createAnimation(option); // 创建动画
					that.box = box;
					box.height('30rpx').step(); //改变父元素高度
					that.box = box.export();
					setTimeout(() => {
						that.TextHeightBool = false;
					}, 300);
				})
				.exec();
		}
	}
};
</script>
<style lang="less" scoped>
.Shop {
	.ShopView {
		border-bottom: 1px solid #f5f5f5;
		.ShopItem {
			box-shadow: 0rpx 4rpx 14rpx 0rpx #e4e2ec;
			padding: 32rpx;
			background: #ffffff;

			.ShopTop {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 32rpx;

				.ShopTitle {
					font-size: 33rpx;
					font-weight: bold;
					color: #212121;
				}

				.ShopTopLeft {
					margin: 20rpx 0;
					font-size: 22rpx;
					font-weight: 500;
					color: #7d7d7d;
					display: flex;
					align-items: center;
					.ShopTopLeftNum {
						color: #ff4d5d;
						margin-right: 12px;
						display: flex;
						align-items: center;
					}
					image {
						width: 32rpx;
						height: 32rpx;
						margin-right: 8rpx;
					}
				}

				.ShopBottom {
					padding: 10rpx 24rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					max-width: max-content;
					background: linear-gradient(90deg, #f1dfb9, rgba(230, 194, 129, 0.99));
					border-radius: 40rpx;
					font-size: 24rpx;
					font-weight: 500;

					image {
						width: 32rpx;
						height: 32rpx;
						margin-right: 12rpx;
					}
				}

				.ShopLoGo {
					width: 144rpx;
					height: 144rpx;
					background: #141213;
					border-radius: 16rpx;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 40rpx;
					overflow: hidden;
				}
			}

			.ShopMessage {
				font-size: 20rpx;
				font-weight: 500;
				color: #9a9a9a;
				.ShopText {
					// padding-top: 30rpx;
					height: 30rpx;
					overflow: hidden;

					.anr {
						text-align: justify;
					}
				}
				.ShopBtnAdd {
					position: absolute;
					bottom: 0px;
					height: 30rpx;
					right: 0rpx;
					background: #fff;
					// display: flex;
					// justify-content: center;
					// width: 60rpx;
					display: flex;
					align-items: center;
				}
			}
		}
	}
}
</style>
